<template>
    <div>
        <div class="person-center">
            <div style="display: flex;margin: 40px 25px;">
                <div>
                    <van-image round width="60" height="60" :src='userInfoData.head_img_url'/>
                </div>
                <div style="line-height: 60px;margin-left: 10px;font-weight: 800;">{{ userInfoData.wx_nickname }}</div>
                
            </div>
            <div class="commissionInfo" style="padding: 30px;">
                <div>
                    <div class="title" style="font-size: 16px;font-weight: 700;">累计佣金</div>
                    <div class="num" style="font-size: 32px;font-weight: 900;color: #61b297;">
                        {{sales_commission + service_commission}}</div>
                </div>

                <div style="margin-top: 30px;display: flex;">
                    <div style="margin-right: 40px;">
                        <div>商品销售累计佣金</div>
                        <div style="font-size: 23px;font-weight: 900;color: #61b297;">{{sales_commission}}</div>
                    </div>
                    <div>
                        <div>平台服务累计佣金</div>
                        <div style="font-size: 23px;font-weight: 900;color: #61b297;">{{ service_commission}}</div>
                    </div>
                    
                </div>
                
            </div>

        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            sales_commission:'',
            service_commission:'',
            userInfoData:{}
        }
    },
    created(){
        this.userCommission()
        this.userInfo()
    },
    methods: {
        userInfo() {
            this.$http.get(this.$api.userInfo).then(res => {
                if (res.code == 200) {
                    this.userInfoData = res.data
                }
            })
        },  
        userCommission () {
            this.$http.get(this.$api.userCommission).then(res => {
                if (res.code == 200) {
                    this.sales_commission = res.data.sales_commission / 100
                    this.service_commission = res.data.service_commission / 100
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.person-center {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100vh;
    width: 100%;
    background: url('../../assets/img/backgroundEnter.png') no-repeat center;
    .commissionInfo {
        margin:30px 20px;
        height: 150px;
        border-radius: 10px;
        background-color:#d0efe4;
        box-shadow: 3px 5px 2px #9cbab0
    }
}
    
</style>